<template>
  <a-modal
    v-model="visible"
    :title="title"
    width="500px"
    :closable="true"
    @ok="handleSubmit"
    destroyOnClose
    @close="handleCancel"
  >
    <a-form :form="form">
      <a-row>
        <a-col :span="24">
          <a-form-item
            :labelCol="formItemLayout.labelCol"
            :wrapperCol="formItemLayout.wrapperCol"
            label="字段名称"
          >
            <a-input
              placeholder="请输入字段名称"
              allowClear
              v-decorator="[
              'name',
              {
                rules: [
                  { required: true, message: '请输入字段名称' },
                ],
                validateTrigger: ['change', 'blur']
              },
            ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :labelCol="formItemLayout.labelCol"
            :wrapperCol="formItemLayout.wrapperCol"
            label="字段类型"
          >
            <a-select
              placeholder="请输入字段类型"
              v-decorator="[
              'columnType',
              {
                rules: [
                  { required: true, message: '请输入字段类型' },
                ],
                validateTrigger: ['change', 'blur']
              },
            ]"
            >
              <a-select-option v-for="select in fieldTypeList" :key="select.key">{{ select.title }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :labelCol="formItemLayout.labelCol"
            :wrapperCol="formItemLayout.wrapperCol"
            :label="form.getFieldValue('columnType')+'效果'"
            v-if="form.getFieldValue('columnType') !== undefined"
          >
            <a-input
              v-if="form.getFieldValue('columnType') === '整数'"
              placeholder="请输入整数"
              type="number"
              step="1"
            ></a-input>
            <a-input
              v-if="form.getFieldValue('columnType') === '小数'"
              placeholder="请输入整数"
              type="number"
              step="0.1"
            ></a-input>
            <a-textarea v-if="form.getFieldValue('columnType') === '区块'" :rows="4" />
            <a-radio-group v-if="form.getFieldValue('columnType') === '是否'" default-value="是">
              <a-radio value="是">是</a-radio>
              <a-radio value="否">否</a-radio>
            </a-radio-group>
            <a-date-picker v-if="form.getFieldValue('columnType') === '日期'" />
            <a-date-picker
              v-if="form.getFieldValue('columnType') === '时间'"
              show-time
              placeholder="请选择时间"
              format="YYYY-MM-DD HH:mm"
            />
            <a-input v-if="form.getFieldValue('columnType') === '文本'"></a-input>
            <a-select placeholder="点击查看下拉效果" v-if="form.getFieldValue('columnType') === '下拉'">
              <a-select-option v-for="data in listData" :key="data">{{ data }}</a-select-option>
            </a-select>
            <a-radio-group v-if="form.getFieldValue('columnType') === '单选'">
              <a-radio v-for="data in listData" :value="data" :key="data">{{ data }}</a-radio>
            </a-radio-group>
            <a-checkbox-group v-if="form.getFieldValue('columnType') === '复选'">
              <a-checkbox v-for="data in listData" :value="data" :key="data">{{ data }}</a-checkbox>
            </a-checkbox-group>
            <a-button
              v-if="'下拉复选单选'.indexOf(form.getFieldValue('columnType')) !== -1"
              type="primary"
              @click="editFieldContent"
            >编辑选择内容</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :labelCol="formItemLayout.labelCol"
            :wrapperCol="formItemLayout.wrapperCol"
            label="备注信息"
          >
            <a-textarea
              placeholder="请输入备注信息"
              :rows="4"
              allowClear
              v-decorator="[
              'remarks',
              {
                rules: [
                  { required: false},
                ],
                validateTrigger: ['change', 'blur']
              },
            ]"
            ></a-textarea>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <fieldContentEdit ref="fieldContentEdit" @ok="fieldContentEditOk"></fieldContentEdit>
  </a-modal>
</template>
<script>
import { getAction, postAction } from "@/api/manage";
import fieldContentEdit from "./fieldContentEdit";
import { add as addCustomField} from "@/api/erp/voucherDesign";

export default {
  data() {
    return {
      //新增 自定义字段
      source: "",
      dataTab: "",
      //布局
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 16 }
      },
      dataSource: null,
      //模态框是否可见
      visible: false,
      //字段类型列表
      fieldTypeList: [
        { key: "文本", title: "文本" },
        { key: "下拉", title: "下拉" },
        { key: "复选", title: "复选" },
        { key: "单选", title: "单选" },
        { key: "日期", title: "日期" },
        { key: "时间", title: "时间" },
        { key: "整数", title: "整数" },
        { key: "小数", title: "小数" },
        { key: "是否", title: "是否" },
        { key: "区块", title: "区块" }
      ],
      //字段内容列表
      listData: [],
    };
  },
  components: {
    fieldContentEdit
  },
  methods: {
    //编辑字段内容回调
    fieldContentEditOk(listData) {
      this.form.setFieldsValue({ selectTest: undefined });
      this.listData = listData;
    },
    //编辑字段内容
    editFieldContent() {
      this.$refs.fieldContentEdit.edit(this.listData);
      this.$refs.fieldContentEdit.title = "编辑字段内容";
    },
    //提交修改字段
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("表单数据：",values)
          const { listData , source , dataTab } = this;
          let psotData = {...values};
          psotData.val = listData.join(",");
          psotData.source = source;
          psotData.dataTab = dataTab;
          addCustomField(psotData).then(res => {
            if (res.code == 200) {
              this.$message.success("新增字段信息成功");
              this.handleCancel();
              this.$emit("ok");
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    // 取消
    handleCancel() {
      this.visible = false;
      this.source = '';
      this.dataTab = '';
      this.listData = [];
      this.form.resetFields();
    },
    //编辑
    edit(record) {
      console.log(record, "record");
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          ...record
        });
      });
    },
    //添加
    add() {
      this.visible = true;

    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "DataSourceEditForm" });
  }
};
</script>
<style lang="less">
.ant-form-item-with-help {
  margin-bottom: 10px;
}
.ant-checkbox-wrapper+.ant-checkbox-wrapper{
  margin-left:0px;
}
</style>